---
import Logo from "./Logo.astro"
import ThemeToggle from "./ThemeToggle.astro"
---

<header class="sticky top--100px z-99">
  <div class="flex justify-between items-start">
    <span class="w-100px h-100px logo">
      <Logo />
    </span>
    <ThemeToggle />
  </div>
  <div
    class="flex items-center mt-4 pb-4 text-2xl title cursor-pointer"
    onclick="scrollToTop()"
  >
    <span
      class="text-transparent font-extrabold bg-clip-text bg-gradient-to-r dark:from-yellow-300 from-yellow-600 dark:to-red-700 to-red-700 mr-1"
      >ChatGPT</span
    >
    <span class="ml-1 font-extrabold text-slate-7 dark:text-slate">Vercel</span>
  </div>
</header>

<script is:inline>
  function scrollToTop() {
    window.scrollTo({
      top: 0,
      behavior: "smooth"
    })
  }
</script>

<style is:inline>
  .after .title,
  .after #themeToggle,
  .after .logo,
  .after #message-container {
    transition-property: transform, opacity;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
  }

  .before .logo {
    transform: translate3D(25px, 150px, 0) scale(2);
  }

  .before #themeToggle {
    transform: translate3D(0, 200px, 0) rotate(540deg);
  }

  .before .title,
  .before #message-container {
    transform: translate3D(0, 200px, 0);
  }

  .before #themeToggle,
  .before #message-container {
    opacity: 0;
  }

  #themeToggle {
    border: 0;
    opacity: 1;
  }
  .after #message-container {
    opacity: 1;
  }
</style>
